$(function () {
  const layer = layui.layer
  const form = layui.form
  // 获取文章分类列表
  initArtCateList()
  function initArtCateList() {
    $.ajax({
      method: 'get',
      url: '/my/article/cates',
      success: function (res) {
        if (res.status !== 0) {
          return '获取列表失败'
        }
        // 获取列表成功，调用template函数
        let htmlStr = template('tpl-table', res)
        $('tbody').html(htmlStr)
      }
    })
  }
  // 点击添加类，打开弹出层
  let indexAdd = null
  $('#addCate').on('click', function () {
    indexAdd = layer.open({
      type: 1,
      title: '添加文章分类',
      area: ['500px', '250px'],
      content: $('#add').html()
    })
  })
  // 通过事件委托，把submit时间委托给body
  $('body').on('submit', function (e) {
    e.preventDefault()
    $.ajax({
      method: 'post',
      url: '/my/article/addcates',
      data: $('#form-add').serialize(),
      success: function (res) {
        if (res.status !== 0) {
          return layer.msg('新增文章分类失败!')
        }
        // 重新获取更新之后的文章分类
        initArtCateList()
        // 关闭弹窗，给一个提示信息
        layer.msg('新增文章分类成功！')
        // 关闭弹窗，根据定义好的indexAdd，通过close方法
        layer.close(indexAdd)
      }
    })
  })
  let indexEdit = null
  //通过事件委托的形式把编辑按钮的点击事件，绑定给当前真实DOM
  $('tbody').on('click', '.btn-edit', function (e) {
    // 弹出一个修改文章分类信息的层
    indexEdit = layer.open({
      type: 1,
      area: ['500px', '250px'],
      title: '修改文章分类',
      content: $('#dialog-edit').html()
    })
    // 2-在点击事件当中，获取到当前编辑按钮对应的id，用于发送请求
    let id=$(this).attr('data-id')
    $.ajax({
      method:'get',
      url:`/my/article/cates/${id}`,
      success:function(res){
        if (res.status==0) {
          // 通过 form.val(值，数据对象)快速赋值 => 通过给 form 表单设置 ay-filter="值'
          form.val('form-edit',res.data)
        }
      }
    })
  })
})